<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>数据源列表 - 后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="SQL,后台模板,后台管理系统,浩瀚HTML模板">
    <meta name="description" content="一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="浩瀚">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <style>
        /* 提高特定模态框的 z-index */
        #alertModal {
            z-index: 9999 !important;
            /* 使用 !important 来确保覆盖其他样式 */
        }

        /* 设置其他模态框的 z-index 值低于告警成功模态框 */
        #confirmModal,
        #editModal {
            z-index: 1050;
            /* 默认Bootstrap模态框的 z-index 值 */
        }

        #sql-input {
            width: 50%;
            /* 根据需要调整宽度 */
        }
    </style>
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增syslog</h4>
                </div>
                <div class="modal-body">

                    <form action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label for="data-name">名称</label>
                            <input class="form-control" type="text" id="data-name" placeholder="输入syslog名称...">
                        </div>

                        <div class="form-group">
                            <label for="data-id">syslogId</label>
                            <input class="form-control" type="text" id="data-id" placeholder="输入syslogId...">
                        </div>

                        <div class="form-group">
                            <label for="data-on">告警产生消息体</label>
                            <input class="form-control" type="text" id="data-on" placeholder="输入告警消除消息体...">
                        </div>
                        <div class="form-group">
                            <label for="data-off">告警消除消息体</label>
                            <input class="form-control" type="text" id="data-off" placeholder="输入告警消除消息体...">
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline text-center">
                <!-- 替换为 Bootstrap 下拉菜单 -->
                <div class="btn-group">
                    <select class="form-control" id="datasource-menu">
                        <!-- 数据库类型选项将在这里动态插入 -->
                    </select>
                </div>
                <input class="form-control" type="text" id="sql-input" autocomplete="off"
                       placeholder="输入自定义syslog...">
                <button type="button" id="execute-btn" class="btn btn-primary">发送自定义syslog</button>
            </div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                            新增
                        </button>
                    </div>
                </div>
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input type="checkbox" id="check-all"><span></span>
                                    </label>
                                </th>
                                <th>编号</th>
                                <th>名称</th>
                                <th>syslogId</th>
                                <th>告警产生</th>
                                <th>告警消除</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="datasource-list">
                            <!-- 动态数据将插入此处 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- 提示模态框 -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="alertModalLabel">操作提示</h4>
            </div>
            <div class="modal-body" id="alertModalBody">
                <!-- 这里将显示具体的提示消息 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="1" role="dialog" aria-labelledby="confirmModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="confirmModalLabel">删除确认</h4>
            </div>
            <div class="modal-body" id="confirmModalBody">
                <!-- 这里显示确认消息 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmModalYes">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑告警模态框 -->
<div class="modal fade" id="editModal" tabindex="2" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="editModalLabel">编辑告警</h4>
            </div>
            <div class="modal-body">
                <form id="edit-alert-form">
                    <div class="form-group">
                        <label for="edit-name">告警名称</label>
                        <input class="form-control" type="text" id="edit-name" readonly>
                        <input class="form-control" type="hidden" id="edit-id" readonly>
                    </div>
                    <div class="form-group">
                        <label for="data-dbType">服务器</label>
                        <select class="form-control" id="data-dbType">
                            <!-- 数据库类型选项将在这里动态插入 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-alarm-on">告警产生消息体</label>
                        <textarea class="form-control" id="edit-alarm-on"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="edit-alarm-off">告警消除消息体</label>
                        <textarea class="form-control" id="edit-alarm-off"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!-- <button type="button" class="btn btn-primary" onclick="sendSelf('on')">告警发送</button> -->
                <button type="button" class="btn btn-primary" onclick="sendEdit('on')">告警产生</button>
                <button type="button" class="btn btn-primary" onclick="sendAlarmOff('off')">告警消除</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">


        // 显示编辑告警模态框
        function showEditModal(syslogId, name, alarmOn, alarmOff) {
            $('#edit-id').val(syslogId);
            $('#edit-name').val(name);
            $('#edit-alarm-on').val(alarmOn);
            $('#edit-alarm-off').val(alarmOff);
            $('#editModal').modal('show');
        }

        // 从数据列表中找到并显示编辑告警模态框
        function editDataSource(id) {
            var dataSource = $('#datasource-list tr').filter(function () {
                return $(this).find('td:nth-child(2)').text() === id;
            }).first();

            if (dataSource.length > 0) {
                var syslogId = dataSource.find('td:nth-child(4)').text();
                var name = dataSource.find('td:nth-child(3)').text();
                var alarmOn = dataSource.find('td:nth-child(5)').text();
                var alarmOff = dataSource.find('td:nth-child(6)').text();
                showEditModal(syslogId, name, alarmOn, alarmOff);
            }
        }

        // 给执行按钮添加点击事件
        $(document).on('click', '.edit-btn', function () {
            var id = $(this).data('id');
            editDataSource(id.toString());
        });

        // 发送编辑后的告警信息
        function sendAlarmOff(type) {
            var name = $('#edit-name').val();
            var alarmOn = $('#edit-alarm-on').val();
            var alarmOff = $('#edit-alarm-off').val();
            var syslogId = $('#edit-id').val();
            var op = 17;
            var selectedOption = $('#data-dbType').find('option:selected');
            var address = selectedOption.data('address');
            var syslogPort = selectedOption.data('syslog-port');
            var payload = {
                name: name,
                content: alarmOff,
                op: op,
                type: 1,
                syslogId: syslogId,
                syslogIp: address,
                syslogPort: syslogPort
            };

            $.ajax({
                url: '/syslog/send',
                type: 'POST',
                contentType: "application/json", // 设置请求头内容类型为 JSON
                data: JSON.stringify(payload),
                success: function (response) {
                    if (response.code === 200) {
                        showAlertModal('告警信息成功发送！');
                        // 可以选择是否在此处刷新数据源列表
                        fetchDataSourceList();
                    } else {
                        showAlertModal('告警信息发送失败！');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showAlertModal('告警信息发送失败！');
                }
            });
        }

        // 发送编辑后的告警信息
        function sendSelf(type) {
            var name = $('#edit-name').val();
            var alarmOn = $('#edit-alarm-on').val();
            var alarmOff = $('#edit-alarm-off').val();
            var op = 16;
            var syslogId = $('#edit-id').val();
            var selectedOption = $('#data-dbType').find('option:selected');
            var address = selectedOption.data('address');
            var syslogPort = selectedOption.data('syslog-port');
            var payload = {
                name: name,
                content: alarmOn,
                op: op,
                type: 1,
                syslogId: syslogId,
                syslogIp: address,
                syslogPort: syslogPort
            };

            $.ajax({
                url: '/syslog/sendSelf',
                type: 'POST',
                contentType: "application/json", // 设置请求头内容类型为 JSON
                data: JSON.stringify(payload),
                success: function (response) {
                    if (response.code === 200) {
                        showAlertModal('告警信息成功发送！');
                        // 可以选择是否在此处刷新数据源列表
                        // fetchDataSourceList();
                    } else {
                        showAlertModal('告警信息发送失败！');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showAlertModal('告警信息发送失败！');
                }
            });
        }

        // 执行按钮点击事件
        $('#execute-btn').click(function () {
            var syslog = $('#sql-input').val().trim();
            // 检查syslog语句是否已输入
            if (!syslog) {
                showAlertModal('请输入syslog内容。');
                return; // 停止函数执行
            }
            var selectedOption = $('#datasource-menu').find('option:selected');
            var address = selectedOption.data('address');
            var syslogPort = selectedOption.data('syslog-port');
            var payload = {
                content: syslog,
                syslogIp: address,
                syslogPort: syslogPort
            };

            $.ajax({
                url: '/syslog/sendSelf',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(payload),
                dataType: 'json',
                success: function (response) {
                    if (response.code === 200 && response.data) {
                        showAlertModal('自定义告警信息成功发送！');
                    } else {
                        showAlertModal('自定义告警信息发送失败！');
                    }
                },
                error: function () {
                    showAlertModal('发送失败。');
                }
            });
        });

        // 发送编辑后的告警信息
        function sendEdit(type) {
            var name = $('#edit-name').val();
            var alarmOn = $('#edit-alarm-on').val();
            var alarmOff = $('#edit-alarm-off').val();
            var op = 16;
            var syslogId = $('#edit-id').val();
            var selectedOption = $('#data-dbType').find('option:selected');
            var address = selectedOption.data('address');
            var syslogPort = selectedOption.data('syslog-port');
            var payload = {
                name: name,
                content: alarmOn,
                op: op,
                type: 1,
                syslogId: syslogId,
                syslogIp: address,
                syslogPort: syslogPort
            };

            $.ajax({
                url: '/syslog/send',
                type: 'POST',
                contentType: "application/json", // 设置请求头内容类型为 JSON
                data: JSON.stringify(payload),
                success: function (response) {
                    if (response.code === 200) {
                        showAlertModal('告警信息成功发送！');
                        // 可以选择是否在此处刷新数据源列表
                        // fetchDataSourceList();
                    } else {
                        showAlertModal('告警信息发送失败！');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showAlertModal('告警信息发送失败！');
                }
            });
        }

        // 显示告警成功模态框并在一定时间后自动关闭
        function showAlertModal(message) {
            $('#alertModalBody').text(message);
            $('#alertModal').modal('show'); // 显示模态框

            // 设置3秒后自动关闭告警成功模态框
            setTimeout(function () {
                $('#alertModal').modal('hide');
            }, 1000); // 1000毫秒后关闭，即1秒
        }

        //------------------------------------------------------------


        var selectedAddress;
        var selectedSyslogPort;

        $('#data-dbType').on('change', function () {
            var selectedOption = $(this).find('option:selected');
            selectedAddress = selectedOption.data('address');
            selectedSyslogPort = selectedOption.data('syslog-port');
        });

        $('#datasource-menu').on('change', function () {
            var selectedOption = $(this).find('option:selected');
            selectedAddress = selectedOption.data('address');
            selectedSyslogPort = selectedOption.data('syslog-port');
        });


        // 提交新增数据源的表单
        function submitNewDataSource() {
            var data = {
                name: $('#data-name').val(),
                syslogId: $('#data-id').val(),
                alarmOn: $('#data-on').val(),
                alarmOff: $('#data-off').val()
            };

            $.ajax({
                url: "/syslog/create",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (response) {
                    if (response && response.code === 200) {
                        $('#myModal').modal('hide');
                        fetchDataSourceList();
                        displayAlertModal('添加成功');
                    } else {
                        // 处理错误或者显示一些消息
                        displayAlertModal('添加失败:' + (response && response.msg ? response.msg : '未知错误'));
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    displayAlertModal('添加数据源请求失败:' + textStatus);
                }
            });
        }
        // 请求数据源列表
        function fetchDataSourceList() {
            $.ajax({
                url: "/syslog/list",
                type: "POST",
                success: function (response) {
                    if (response.code === 200 && response.data) {
                        updateDataSourceTable(response.data);
                    } else {
                        // 处理错误或者显示一些消息
                        console.error('获取数据失败:', response.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    console.error('请求数据源列表失败:', textStatus, errorThrown);
                }
            });
        }

        // 更新表格函数
        function updateDataSourceTable(data) {
            var tbody = $('#datasource-list');
            tbody.empty(); // 清空现有的数据

            data.forEach(function (dataSource) {
                var row = `<tr>
                <td>
                    <label class="lyear-checkbox checkbox-primary">
                        <input type="checkbox" name="ids[]" value="${dataSource.id}"><span></span>
                    </label>
                </td>
                <td>${dataSource.id}</td>
                <td>${dataSource.name}</td>
                <td>${dataSource.syslogId}</td>
                <td>${dataSource.alarmOn}</td>
                <td>${dataSource.alarmOff}</td>
                <td>
                    <div class="btn-group">
                        <a class="btn btn-xs btn-default edit-btn" href="#!" title="执行" data-toggle="modal" data-target="#editModal" data-id="${dataSource.id}"><i class="mdi mdi-pencil"></i></a>
                        <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip" onclick="confirmDelete('${dataSource.name}', '${dataSource.id}')"><i class="mdi mdi-window-close"></i></a>

                    </div>
                </td>
            </tr>`;
                tbody.append(row);
            });
        }



        // 确认删除的函数，使用Bootstrap模态框
        function confirmDelete(name, id) {
            // 设置模态框消息并显示模态框
            $('#confirmModalBody').text('您确定要删除 "' + name + '" 这个syslog吗？');
            $('#confirmModal').modal('show');

            // 绑定点击事件到“确定”按钮上
            $('#confirmModalYes').off('click').on('click', function () {
                deleteDataSource(name, id);
                $('#confirmModal').modal('hide'); // 隐藏模态框
            });
        }


        // 发起删除数据源的 AJAX 请求的函数
        function deleteDataSource(name, id) {
            $.ajax({
                url: "/syslog/remove",
                type: "POST",
                contentType: "application/json", // 设置请求头内容类型为 JSON
                data: JSON.stringify({ "name": name, "id": id }), // 将对象转为 JSON 字符串
                success: function (response) {
                    if (response.code === 200) {
                        // 删除成功后的操作，比如重新加载数据源列表
                        fetchDataSourceList();
                        //alert(name + ' 已成功删除。');
                    } else {
                        // 删除失败的操作
                        displayAlertModal('删除失败: ' + response.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    displayAlertModal('删除请求失败: ' + textStatus);
                }
            });
        }

        // 显示提示模态框的函数
        function displayAlertModal(message) {
            $('#alertModalBody').text(message); // 设置提示消息
            $('#alertModal').modal('show'); // 显示模态框
        }

        function fetchServerTypes() {
            $.ajax({
                url: "/server/list",
                type: "POST",
                success: function (response) {
                    if (response) {
                        var dbTypeSelect = $('#data-dbType');
                        dbTypeSelect.empty();

                        response.data.forEach(function (server) {
                            var option = `<option value="${server.id}" data-address="${server.address}" data-syslog-port="${server.syslogPort}">${server.serverName}:${server.address}</option>`;
                            dbTypeSelect.append(option);
                        });
                    } else {
                        // 处理错误或者显示一些消息
                        console.error('获取服务器列表失败');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    console.error('请求服务器列表失败:', textStatus, errorThrown);
                }
            });
        }

        function fetchServerTypes2() {
            $.ajax({
                url: "/server/list",
                type: "POST",
                success: function (response) {
                    if (response) {
                        var dbTypeSelect = $('#datasource-menu');
                        dbTypeSelect.empty();

                        response.data.forEach(function (server) {
                            var option = `<option value="${server.id}" data-address="${server.address}" data-syslog-port="${server.syslogPort}">${server.serverName}:${server.address}</option>`;
                            dbTypeSelect.append(option);
                        });
                    } else {
                        // 处理错误或者显示一些消息
                        console.error('获取服务器列表失败');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    console.error('请求服务器列表失败:', textStatus, errorThrown);
                }
            });
        }

        $(document).ready(function () {
            fetchServerTypes();
            fetchServerTypes2();
            //fetchApiServerUrl();
            // 绑定保存按钮的点击事件来提交表单
            $('#myModal .btn-primary').click(submitNewDataSource);

            // 页面加载完成后立即获取数据源列表
            fetchDataSourceList();

        });

    </script>

</body>

</html>